<template>
  <!-- 顶部搜索框 -->
  <SearchInput v-if="type==2" url="/course/search"></SearchInput>

  <!-- banner -->
  <div class="banner" v-else-if="type==1" :class="showType==1?'active':''" >
    <div class="swiper-container banner-swiper">
      <swiper
        :options="swiperOption"
        class="swiper-wrapper"
        v-if="content.list.length>0 && swiperOption.loop"
      >
        <swiper-slide class="swiper-slide" v-for="(item,index) in content.list" :key="index">
          <a href="javascript:void(0);">
            <img :src="img_url+item.img" :data-index="index">
          </a>
        </swiper-slide>
        <div class="swiper-pagination" slot="pagination"></div>
      </swiper>
    </div>
  </div>

  <!-- 顶部导航，课程和我的一定会有，导航大于2个块才展示，石榴说2个块太丑了 -->
  <div class="nav-box" v-else-if="type==9 && (isShowLive==1 || isShowBank==1 || isShowInfo==1)">
    <ul>
      <li>
        <router-link to="/course">
          <img src="../../assets/images/nav-course-icon.png" alt="课程" style="box-shadow: 0 2px 4px 0 rgba(0, 136, 255, 0.2);">
          <p>课程</p>
        </router-link>
      </li>

      <li v-if="isShowLive == 1">
        <router-link to="/live">
          <img src="../../assets/images/nav-live-icon.png" style="box-shadow: 0 2px 4px 0 rgba(103, 194, 58, 0.2);">
          <p>直播</p>
        </router-link>
      </li>
      <li v-if="isShowBank == 1">
        <router-link to="/question">
          <img src="../../assets/images/nav-question-icon.png" style="box-shadow: 0 2px 4px 0 rgba(245, 108, 108, 0.2);">
          <p>题库</p>
        </router-link>
      </li>
      <li v-if="isShowInfo == 1">
        <router-link to="/info">
          <img src="../../assets/images/nav-news-icon.png" style="box-shadow: 0 2px 4px 0 rgba(67, 130, 121, 0.2);">
          <p>资讯</p>
        </router-link>
      </li>
      <li>
        <router-link to="/member">
          <img src="../../assets/images/nav-member-icon.png" style="box-shadow: 0 2px 4px 0 rgba(255, 164, 0, 0.2);">
          <p>我的</p>
        </router-link>
      </li>
    </ul>
  </div>

  <!-- 推荐课程，拼团只包括课程和直播 -->
  <div class="coursex commonblock" v-else-if="type==3">
    <div class="commontitle">
      <p>{{title}}</p>
      <router-link to="/course" v-if="show_more == 1" class="show_more">
        <i class="icon icon16 more-icon"></i>
      </router-link>
    </div>
    <div class="coursex-list" v-if="content.list.length>0">
      <router-link
        v-for="(l,index) in content.list"
        :key="index"
        :to="{ name: l.goods_type== 1?'CourseDetail':'CourseAudio', query: { id: l.cid }}"
        class="coursex-item"
        :class="showType==1 ? 'twodiff':''"
      >
        <CourseItem
          :viewType="showType==1?'two':''"
          :banner="l.banner"
          :title="l.title"
          :studyCount="l.study_count"
          :price="l.price"
          :goodtype="l.goods_type"
          :isGroup="l.is_group"
        ></CourseItem>
      </router-link>
    </div>
  </div>

  <!--富文本-->
  <div class="textarea richText" v-html="content" v-else-if="type==4"></div>

  <!-- 套餐 -->
  <div class="bundle commonblock" v-else-if="type==6">
    <div class="commontitle">
      <p>{{title}}</p>
      <router-link to="/bundle" v-if="show_more == 1" class="show_more">
        <i class="icon icon16 more-icon"></i>
      </router-link>
    </div>

    <div class="bundle-list" v-if="content.list.length>0">
      <router-link
        v-for="(item,index) in content.list"
        :to="{ name: 'BundleDetail', query: { id: item.id }}"
        :key="index"
        class="swiper-slide"
        :style="content.list.length>1 ? 'width:2.7rem;margin-right:.12rem;':''"
      >
        <BundleItem
          :title="item.title"
          :banner="item.banner"
          :courseNumbers="item.courseNumbers"
          :price="item.price"
          :viewType="content.list.length>1?'two':'one'"
        ></BundleItem>
      </router-link>
    </div>
  </div>

  <!-- 直播列表-->
  <div class="livex commonblock" v-else-if="type==7 && content.list">
    <div class="commontitle">
      <p>{{title}}</p>
      <router-link to="/live" v-if="show_more == 1" class="show_more">
        <i class="icon icon16 more-icon"></i>
      </router-link>
    </div>
    <div class="livex-list">
      <router-link
        v-for="item in content.list"
        :key="item.id"
        :to="{ name: 'LiveDetail', query: { id: item.id }}"
        class="livex-item"
      >
        <LiveItem
          :image="img_url+item.banner"
          :liveState="item.live_state"
          :startTime="item.start_time"
          :endTime="item.end_time"
          :liveTitle="item.live_title"
          :title="item.title"
          :price="item.price"
          :isGroup="item.is_group"
        ></LiveItem>
      </router-link>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
import Swiper from "static/js/swiper.min.js";
import SearchInput from "common/SearchInput";
import LiveItem from "components/live/LiveItem";
import CourseItem from "components/course/CourseItem";
import BundleItem from "components/course/BundleItem";
import { swiper, swiperSlide } from "vue-awesome-swiper";
export default {
  data: () => ({
    swiperOption: {}
  }),
  components: {
    SearchInput,
    LiveItem,
    CourseItem,
    BundleItem,
    swiper,
    swiperSlide
  },
  name: "Customize",
  computed: {
    ...mapState(["img_url"])
  },
  props: {
    // 类型，banner、直播、套餐
    type: {
      type: Number,
      defaule: 0
    },
    // 样式形式
    showType: {
      type: Number,
      defaule: 1
    },
    // 具体数据，富文本、对象、数组
    content: {
      defaule: null
    },
    // 块标题
    title: {
      type: String,
      defaule: "没有设置"
    },
    // 更多详情icon
    show_more: {
      type: Number,
      defaule: 0
    },

    /**
     *
     * 顶部导航 特有字段
     *
     **/

    // 是否展示直播
    isShowLive: {
      type: Number,
      defaule: 0
    },
    // 是否展示题库
    isShowBank: {
      type: Number,
      defaule: 0
    },
    // 是否展示咨询
    isShowInfo: {
      type: Number,
      defaule: 0
    }
  },
  methods: {
    bannerClick(event) {
      let item = this.content.list[event.target.dataset.index];
      if (item.type == "course") {
        this.$router.push({ name: "CourseDetail", query: { id: item.id } });
      } else if (item.type == "link") {
        window.location.href = item.link;
      } else if (item.type == "allcourse") {
        this.$router.push({ name: "CourseIndex" });
      } else if (item.type == "allpackage") {
        this.$router.push({ name: "BundleIndex" });
      } else if (item.type == "package") {
        this.$router.push({ name: "BundleDetail", query: { id: item.id } });
      } else if (item.type == "vip") {
        this.$router.push({ name: "MemberVip" });
      } else if (item.type == "live") {
        this.$router.push({ name: "LiveDetail", query: { id: item.id } });
      }
    }
  },
  mounted() {
    // bannar
    if (this.type == 1) {
      let that = this;
      if (this.showType == 1) {
        this.swiperOption = {
          loop: true,
          autoplay: true,
          disableOnInteraction: false,
          pagination: {
            el: ".banner-swiper .swiper-pagination"
          },
          on: {
            tap: function(event) {
              that.bannerClick(event);
            }
          }
        };
      } else if (this.showType == 2) {
        // 两边有边距，由于js赋值于行内样式，不适合css
        let availWidth = window.screen.availWidth;
        let swiperWidth = (321 / 375) * availWidth; // 仅支持px
        let swiperOffset = (availWidth - swiperWidth) / 2;
        this.swiperOption = {
          slidesOffsetBefore: swiperOffset,
          slidesOffsetAfter: swiperOffset,
          width: swiperWidth,
          centeredSlides: true,
          spaceBetween: 13,
          loop: true,
          loopAdditionalSlides: 1,
          autoplay: true,
          disableOnInteraction: false,
          pagination: {
            el: ".banner-swiper .swiper-pagination"
          },
          on: {
            tap: function(event) {
              that.bannerClick(event);
            }
          }
        };
      }
    }
  }
};
</script>

<style scoped  lang="scss">
/*banner*/
.banner {
  height: 2.04rem;
  padding: .12rem 0;
  &.active{
      height: 2.34rem;
      padding: 0;
      .banner-swiper {
        /deep/ {
          .swiper-slide img {
            height: 2.1rem;
            border-radius: 0;
          }
        }
      }
    }
  /* 轮播图 */
  &-swiper {
    /deep/ {
      .swiper-slide img {
        height: 1.8rem;
        width: 100%;
        border-radius: 0.03rem;
      }
    }
  }
}

// 分页器
/deep/ {
  .swiper-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    bottom: 0.09rem;
    .swiper-pagination-bullet {
      width: 0.06rem;
      height: 0.06rem;
      margin: 0.01rem 0.04rem 0.01rem 0;
      box-shadow: none;
      background-color: #DCDFE6;
    }
    .swiper-pagination-bullet-active {
      width: 0.16rem;
      height: 0.06rem;
      border-radius: 0.03rem;
      background: #fff;
    }
  }
}

/*富文本编辑器*/
.textarea {
  background: #fff;
  padding: 0.12rem;
  margin: 0.12rem 0;
}
/*导航栏*/
.nav-box {
  height: 0.9rem;

  ul {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;

    li {
      text-align: center;

      p {
        font-size: 0.12rem;
        line-height: 0.17rem;
      }

      img {
        width: 0.42rem;
        height: 0.42rem;
        margin-bottom: 0.06rem;
        border-radius: 50%;
      }
    }
  }
}

.commonblock {
  padding: 0.12rem;
}
.commontitle {
  display: flex;
  justify-content: space-between;
  align-items: center;
  p {
    color: #303133;
    font-size: 0.16rem;
    font-weight: bold;
  }
  a {
    margin-right: -0.12rem;
    width: 0.3rem;
    i {
      color: #d8d8d8;
      font-size: 0.16rem;
      background: url("../../assets/images/arrow-left-icon-gray-4.png")
        center/contain;
    }
  }
}

/* 热门直播 */
.livex {
  &-list {
    overflow: hidden;
  }
  &-item {
    display: inline-block;
    margin-top: 0.1rem;
    &:nth-of-type(2n + 2) {
      margin-left: 0.1rem;
    }
    // &.twodiff:nth-of-type(2n + 2) {
    //   margin-left: 0.1rem;
    // }
  }
}

/*推荐课程*/
.coursex {
  &-list {
    overflow: hidden;
  }
  &-item {
    background-color: #fff;
    display: inline-block;
    margin-top: 0.1rem;
    padding: 0;
    &:nth-of-type(2n + 2) {
      margin-left: 0.1rem;
    }
    &.twodiff {
      padding: .12rem;
      width: auto !important;
      border-radius: .04rem;
      &:nth-of-type(2n + 2) {
        margin-left: 0;
      }
    }
  }
}

/*套餐*/
.bundle {
  &-list {
    display: flex;
    overflow-x: scroll;
    margin-top: 0.1rem;
    -webkit-overflow-scrolling: touch;
    overflow-scrolling: touch;
    /deep/ {
      .bundle-item {
        margin-left: 0.12rem;
        &:first-child {
          margin-left: 0;
        }
      }
    }
  }
}

/*客服悬框*/
.service-box {
  width: 0.5rem;
  height: 0.5rem;
  background: url("../../assets/images/service-icon.png") no-repeat center/cover;
  position: fixed;
  bottom: 1.1rem;
  right: 0.12rem;
  z-index: 9999;
}
/*设置弹窗*/
.wx-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  z-index: 100;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  justify-content: center;
  align-items: center;
  // display: none;
  .wx-modal-box {
    .modal-content {
      padding: 0.2rem 0.5rem;
      background-color: #fff;
      text-align: center;
      width: 2.85rem;
      > p {
        font-size: 0.18rem;
        font-weight: 500;
        color: #303133;
        line-height: 0.25rem;
        margin-bottom: 0.16rem;
      }
      > img {
        width: 1.85rem;
        height: 1.85rem;
        margin-bottom: 0.16rem;
      }
      > span {
        display: block;
        font-size: 0.14rem;
        font-weight: 500;
        color: #909399;
        line-height: 0.2rem;
      }
    }
    .close-btn {
      width: 0.32rem;
      height: 0.32rem;
      background: url("../../assets/images/close.png") no-repeat center/cover;
      display: block;
      margin: 0.2rem auto 0;
    }
  }
}
.service-modal {
  z-index: 99999;
  .wx-modal-box .modal-content {
    padding: 0.2rem 0;
    > span {
      padding-left: 0.48rem;
      text-align: left;
    }
  }
}
// .more-icon {
//   background: url("../../assets/images/Rectangle 3@2x.png") no-repeat;
//   background-size: cover;
// }
</style>
